<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>省份城市下拉框联动</title>
</head>
<body>
<select name="province" id="province"></select>
<select name="city" id="city"></select>
<script src="provinceAndCity.js"></script>
<script>
    var provinceList = "";
    var cityList = "";
    for (var i = 0; i < provinceAndCity.length; i++) {
        provinceList += '<option index="' + i + '" value="' + provinceAndCity[i].name + '">' + provinceAndCity[i].name + '</option>';
    }
    cityList = '<option index="' + 0 + '" value="' + provinceAndCity[0].cities + '">' + provinceAndCity[0].cities + '</option>';
    var provinceDOM = document.getElementById('province');
    var cityDOM = document.getElementById('city');
    provinceDOM.innerHTML = provinceList;
    cityDOM.innerHTML = cityList;
    provinceDOM.addEventListener('change', function(e) {
        var selectedIndex = this.selectedIndex;
        cityList = "";
        for (var j = 0; j < provinceAndCity[selectedIndex].cities.length; j++) {
            cityList += '<option index="' + j + '" value="' + provinceAndCity[selectedIndex].cities[j] + '">' + provinceAndCity[selectedIndex].cities[j] + '</option>';
        }
        cityDOM.innerHTML = cityList;
    }, false)
</script>
</body>
</html>